<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.obox {
				width: 400px;
				height: 400px;
				margin: 0 auto;
				background: #e5e5e5;
				display: none;
			}

			.obox input {
				width: 150px;
				height: 30px;
			}

			.obox select {
				width: 150px;
				height: 30px;

			}

			.obox p {
				width: 150px;
				height: 30px;
				margin: 0 auto;
				margin-top: 30px;
			}

			.push button:active {
				background: #00f;

			}
		</style>
	<body>
		<div class="btn">
			<button class="seleAll">全选</button>
			<button class="allDel">批量删除</button>
			<button class="reverse">反选</button>
			<button class="noneSele">全不选</button>

			<button class="add">添加</button>
		</div>

		<table width="500" border="1">
			<tr height="30" align="center">
				<td> 选择 </td>
				<td>姓名</td>
				<td>爱好</td>
				<td>性别</td>
				<td>删除</td>
			</tr>
			<tr height="30" align="center">
				<td><input type="checkbox" /></td>
				<td>范冰冰</td>
				<td>演戏</td>
				<td>女</td>
				<td><input class="toDel" type="button" value="del" /> </td>
			</tr>
		</table>
		<div class="obox">
			<p><input class="name" type="text" value="姓名" /></p>
			<p>
				<select class="hobby">
					<option>音乐</option>
					<option>篮球</option>
					<option>体育</option>
				</select>
			</p>
			<p>
				<select class="sex">
					<option>男</option>
					<option>女</option>

				</select>
			</p>

			<p class="push">
				<button>确认提交</button>

			</p>
		</div>
		<script type="text/javascript">
			// 点击添加显示弹窗
			$(".add").on('click', function() {
				$(".obox").show()

				$(this).css({
					"background": "#0f0"
				})
			})
			// 点击确认提交提交数据 弹窗消失

			$(".push button").on("click", function() {

				// 获取文本框数据
				var theName = $(".name").val()
				var theHobby = $(".hobby").val()
				var theSex = $(".sex").val()
				// 将数据放到表格中
				$("table").append(
					`<tr height='30' align='center'>
						<td><input type='checkbox'   /> </td>
						<td >${theName} </td>
						<td>${theHobby} </td>
						<td>${theSex} </td>
						<td> <input class='toDel' type='button' value='del' /></td>
					</tr>`
				)
				//弹窗消失
				$(".obox").hide()

				$(".add").css({
					"background": "#ccc"
				})
				//点击del 删除本条数据
				$(".toDel").on("click", function() {
					$(this).parent().parent().remove()
				})
			})
			//点击全选 全部选中
			$(".seleAll").on('click', function() {
				var seleAll = $("input[type='checkbox']")
				seleAll.each(function() {
					seleAll.prop('checked', true)
				})
			})
			// 反选
			$(".reverse").on("click", function() {
				var seleAll = $("input[type='checkbox']")
				seleAll.each(function() {
					this.checked = !this.checked
				})
			})

			//全不选
			$(".noneSele").on("click", function() {
				var seleAll = $("input[type='checkbox']")
				seleAll.each(function() {
					seleAll.prop('checked', false)
				})
			})
			//批量删除

			$(".allDel").on("click", function() {
				var allDel = $(":checkbox:checked")
				if (allDel.length > 0) {
					allDel.each(function() {
						$(this).parent().parent().remove()
					})
				} else {
					alert('请选中数据后在删除')
				}
			})

			//点击del 删除本条数据
			$(".toDel").on("click", function() {
				$(this).parent().parent().remove()
			})
		</script>
	</body>
</html>
